<script setup lang='ts'>
import { ref, onBeforeMount, inject } from 'vue';
import { PageInfo, popMessage, popMessageKey } from '@/type'
import CommonRedHeader from '@components/Common/CommonRedHeader.vue'
import CommonPagenation from '@components/Common/CommonPagenation.vue';
import { getAllMusic } from '@api';
import { useRouter } from 'vue-router';
import { MusicDto } from '@/type';
import { useStore } from '@store/index';
const popMessage = inject(popMessageKey) as popMessage
const store = useStore()
const router = useRouter()
const currentPage = ref(1);
const BASEURL = store.getBaseUrl()
const musicPageInfo = ref<PageInfo<MusicDto>>()
const updateMusicList = () => {
    getAllMusic(currentPage.value).then(res => {
        if (res.data.code == 1) {
            musicPageInfo.value = res.data.data;
        }
    })
}
onBeforeMount(() => {
    store.setActiveItem(2)
    updateMusicList()
})
const changePage = (type: number | 'next' | 'last') => {
    switch (type) {
        case 'next':
            if (musicPageInfo.value?.hasNextPage) {
                currentPage.value++
                updateMusicList()
            } else {
                popMessage("没有下一页了", 'info')
            }
            break;
        case 'last':
            if (musicPageInfo.value?.hasPreviousPage) {
                currentPage.value--
                updateMusicList()

            } else {
                popMessage("没有上一页了", 'info')
            }
            break;
        default:
            currentPage.value = type
            updateMusicList()
    }
}
const toMusicPage = (id: string) => {
    router.push({
        name: 'singleMusic',
        params: {
            musicId: id
        }
    })
}
const toUserPage = (id: string) => {
    router.push({
        name: 'personCenter',
        params: {
            userId: id,
            type: 'default'
        }
    })
}
</script>
<template>
    <div class="container">
        <CommonRedHeader title="全部" />
        <div class="list">
            <template v-if="musicPageInfo">
                <div class="list-item" v-for="(item) of musicPageInfo?.list">
                    <div class="image" @click="toMusicPage(item.music.musicId as string)">
                        <img :src="BASEURL + '/static/image/' + item.music.image" />
                    </div>
                    <div class="info">
                        <h3 class="musicTitle">{{ item.music.title }}</h3>
                        <p @click="toUserPage(item.user.id)" class="creator">歌手:{{ item.user.name }}</p>
                    </div>
                </div>
            </template>
        </div>
        <CommonPagenation v-if="musicPageInfo" :change-page="changePage" :current-page="currentPage"
            :page-info="musicPageInfo" />
    </div>
</template>
<style scoped lang='css'>
.creator {
    font-size: 14px;
    color: #999;
    margin: 5px 0 0 0;
    cursor: pointer;
}

.creator:hover {
    text-decoration: underline;
}

.creator,
.musicTitle {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    cursor: pointer;
}

.musicTitle {

    margin: 0;
    font-size: 14px;
    font-weight: normal;
}

.list {
    display: grid;
    justify-content: space-between;
    grid-template-columns: repeat(5, 140px);
    width: 100%;
    margin-top: 30px;
}

.image img {
    width: 140px;
    cursor: pointer;
}

.list-item {
    width: 140px;
    margin-bottom: 20px;
}

.container {
    padding: 30px 35px;
    box-sizing: border-box;
    display: flex;
    width: 100%;
    flex-direction: column;
    margin-bottom: 50px;
}
</style>